<!-- 头部导航 -->
<template>
<div>
  <div class="banner" @click="handleImageShow">
      <img class="banner-img" :src="bannerImg" alt="">
      <div class="banner-info">
          <div class="banner-title"> {{sightName}}</div>
          <div class="banner-number" >
              <span><i class="iconfont icon-tupian"></i></span>
              <span class="img-length">{{this.gallaryImgs.length}}</span>
          </div>
      </div>
  </div>
  <Fade>
    <common-gallary :imgs="gallaryImgs" v-show="showGallery" @closeGallery="handleGallaryShow"></common-gallary>
  </Fade>

</div>

</template>
<script>
import CommonGallary from 'common/gallary/gallary'
import Fade from 'common/fade/fade'
export default {
  data () {
    return {
      showGallery: false
    }
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  components: {
    CommonGallary,
    Fade
  },

  computed: {},

  methods: {
    handleImageShow () {
      this.showGallery = true
    },
    handleGallaryShow () {
      this.showGallery = false
    }
  }
}

</script>
<style lang='stylus' scoped>
.banner
  position relative
  overflow hidden
  height 0
  padding-bottom 55%
  .banner-img
    width 100%
  .banner-info
    color #fff
    display flex
    position absolute
    left 0
    right 0
    bottom 0
    line-height .6rem
    padding-right .2rem
    .banner-title
      font-size .32rem
      flex 1
      padding 0 .2rem
    .banner-number
      padding 0 .3rem
      line-height .4rem
      height .4rem
      margin-top .1rem
      border-radius .1rem
      background rgb(0, 0, 0, .8)
      font-size .24rem
      .img-length
        position relative
        top -.02rem
      .icon-icon-tupian
        font-size .24rem
</style>
